<template>
  <div class="card-article-content">
    <el-row class="pb-10">
      <el-col :md="2" :lg="2" :xl="2" hidden-md-and-down></el-col>
      <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
        <el-card class="w-full">
          <template #header>
            <div class="card-header">
              <div class="flex title-content justify-center pt-5 pb-5">
                <span class="mt-5"></span>
                <h3 class="pr-4 pl-4">{{ data.title }}</h3>
                <span class="mt-5"></span>
              </div>
              <el-row>
                <el-col :md="4" :lg="8" :xl="8" hidden-md-and-down></el-col>
                <el-col :xs="24" :sm="24" :md="16" :lg="8" :xl="8">
                  <div class="flex justify-center text-center sub-title">
                    <label class="flex-1 text-center">
                      <svg-icon icon-class="tips" /><span class="pl-3 whitespace-nowrap">{{ data.tips }}</span></label>
                    <label class="flex-1 flex-nowrap">
                      <svg-icon icon-class="time" /><span class="pl-3 whitespace-nowrap">{{ data.createTime
                        }}</span></label><label class="flex-1 flex-nowrap">
                      <svg-icon icon-class="lookNum" /><span class="pl-3 whitespace-nowrap">
                        {{ data.lookNum }}
                      </span></label>
                  </div>
                </el-col>
                <el-col :md="4" :lg="8" :xl="8" hidden-md-and-down></el-col>
              </el-row>
            </div>
          </template>
          <!--表格备注-->
          <div>
            <p>{{ data.table.remarks }}</p>
          </div>
          <div class="pt-4">
            <el-table :data="data.table.tableList" border :show-header="false">

              <el-table-column prop="productionName" label="产品名称" align="center" />
              <el-table-column prop="productionIn" label="项目1" align="center" />
              <el-table-column prop="productionOut" label="项目2" align="center" />

            </el-table>

          </div>
          <!--其他说明-->
          <div v-for="(item, index) in data.contentOther" :key="index" class="p-2 card-other-content">
            <p> {{ item.title }}</p>
            <p v-for="(value, index) in item.list" :key="index">{{ value }}</p>
          </div>
          <!--活动说明-->
          <div v-for="(item, index) in data.activeDescription" :key="index" class="p-2 card-desc-content">
            <p> {{ item.title }}</p>
            <p v-for="(value, index) in item.list" :key="index">{{ value }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :md="2" :lg="2" :xl="2" hidden-md-and-down></el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'
interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}
interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

</script>
<style lang="scss" scoped>
.card-article-content {
  font-size: var(--text-primary-size);

  .title-content {
    span {
      width: 40px;
      height: 1px;
      background-color: #000;
    }

    h3 {
      font-size: var(--text-h3-size);
    }
  }

  .sub-title {
    font-size: 15px;
  }

  .card-article-content {
    color: var(--color-text-title);
    font-size: var(--text-primary-size);
  }
}

.card-other-content {
  font-size: var(--text-little-size);
}

.card-desc-content {
  font-size: var(--text-little-size);

}

:deep(.el-table__row):nth-child(1) {
  color: var(--color-text-title);
}
</style>
